<template>
	<view class="content">
		<u-alert title="未连接扫码服务器" v-if="!isConnect" type="error" :center="true" @click="showConnectServerConfig = true"
			:closable="false" description="点击立即连接"></u-alert>
		<u-alert title="扫码服务器已连接!" v-if="isConnect" type="primary" :center="true" :closable="false"
			description=""></u-alert>
		<u-action-sheet :actions="connectServerConfigList" @select="selectClickEvent" :closeOnClickOverlay="true"
			:closeOnClickAction="true" title="" :show="showConnectServerConfig"
			@close="showConnectServerConfig = false"></u-action-sheet>
		<u-popup :show="showPopUp" @close="showPopUp = false">
			<view>
				<view style="margin-top: 20upx">
					<u--input v-model="manualConfig" style="margin-top: 10px;" disabledColor="#ffffff"
						placeholder="请输入服务器地址(IP+端口)"></u--input>
					<button style="margin-top: 20upx;" type="primary" v-on:click="manualConnectServer">手动连接服务</button>
				</view>
			</view>
		</u-popup>
		<view style="position: fixed; bottom: 180rpx; width: 100%;">
			<u-button icon="scan" style="width: 30%; margin-top: 15upx;" type="primary" v-on:click="scanCode"
				text="开始扫码"></u-button>
		</view>
		
		<u-list height="500" style="">
			<u-list-item v-for="(item, index) in scanCodeResultList" :key="index">
				<u-cell :title="`${item}`">
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scanCodeResultList: [],
				showPopUp: false,
				connectServerConfigList: [{
						name: '扫码连接',
						mode: 0
					},
					{
						name: '手动输入IP连接',
						mode: 1
					}
				],
				showConnectServerConfig: false,
				manualConfig: '',
				host: '',
				port: '',
				isConnect: false, //是否已连接服务器
				result: ''
			}
		},
		methods: {
			// 关闭socket服务
			closeServerEvent(){
				uni.closeSocket({
					code:1000,
					success: (e) => {
						this.isConnect = false;
					},
					fail: (e) => {
					}
				})
			},
			startConncetServer() {
				this.showConnectServerConfig = true;
			},
			selectClickEvent(item) {
				if (item.mode == 0) {
					// 扫码连接
					this.connectServer();
				} else {
					this.showPopUp = true
					// 手动输入IP连接
				}
			},
			closeConnectServerConfigEvent() {
				this.showConnectServerConfig = false;
			},
			sendMessage(message) {
				uni.sendSocketMessage({
					data: message
				});
			},
			connectServer() {
				let _this = this;
				uni.scanCode({
					success: function(res) {
						let hostPort = res.result;
						let hostPorts = hostPort.split(";");
						_this.host = hostPorts[0];
						_this.port = hostPorts[1];
						if (hostPorts.length > 2 || hostPorts.length <= 1) {

						} else {
							_this.createConnect(hostPorts[0], hostPorts[1]);
						}
					},
				});
			},
			// 手动连接服务
			manualConnectServer() {
				if (!this.manualConfig) {
					plus.nativeUI.toast('请输入服务地址');
				} else {
					let hostPorts = this.manualConfig.split(':');
					this.createConnect(hostPorts[0], hostPorts[1]);
				}
			},
			createConnect(host, port) {
				let _this = this;
				let userId = Math.random(100);
				//连接socket
				console.log(host);
				console.log(port);
				console.log(userId);
				let socket = uni.connectSocket({
					url: 'ws://' + host + ':' + port + '/websocket/' + userId, // 本地
					success: (res) => {
						console.log('connectSocket success', JSON.stringify(res))
					}
				})
				uni.onSocketOpen(function(res) {
					console.log('WebSocket连接已打开！');
					_this.showConnectServerConfig = false;
					_this.showPopUp = false;	
					_this.isConnect = true;
				});
				uni.onSocketError(function(res) {
					uni.showToast({
						title: '连接打开失败！',
						duration: 2000
					});
					console.log('WebSocket连接打开失败，请检查！' + JSON.stringify(res));
					_this.isConnect = false;
				});
			},
			scanCode() {
				let _this = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						_this.scanCodeResultList.unshift(res.result);
						if (_this.isConnect) {
							_this.sendMessage(res.result);
						}
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail: function(res) {
						console.log("fail:" + JSON.stringify(res));
					},
					complete: function(res) {
						console.log("complete:" + JSON.stringify(res));
					}
				});
			},
		},
		onLoad() {
		},
		onUnload(){
			this.closeServerEvent();
		}
	}
</script>

<style scoped lang="scss">
</style>